<!DOCTYPE html>
<!-- Reader -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/reader_paydeposit.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        function getQueryString(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }
        function exit(){
            $(".tanchuceng").css("display","none");
            window.location.href = "/reader_searchbook(no)";
        }
        function pay() {
            var phone = getQueryString("phone");
            $.ajax({
                url : "/payDeposit",
                type : "post",
                data : {
                    "phone" : phone
                },
                success : function (data) {
                    $("#message").html("Pay successfully! Please wait for librarian check!");
                    $(".tanchuceng").css("display","block");
                }
            })
        }
    </script>
</head>
<body>
    <div class="main clearfix">
        <header class="header clearfix">
            <i class="iconfont icon-yun"></i>
            <i>Library</i>
        </header>

        <div class="content">
            <div class="photo">
                <img src="images/reader_paydeposit.jpg" alt="">
            </div>
            <div class="info">
                <div class="pho">
                    Please pay a deposit for the first login:300yuan
                </div>
                <div class="scan">
                    Scan the QR code below
                </div>
            </div>
            <div class="btn">
                <button class="next" onclick="pay()">Next</button>
            </div>
        </div>
        <footer class="footer">
            <div class="mandarin">
                <img src="images/mandarin.png" alt="">
            </div>
            <p>Shan ICP number18018134 | Powered by 1713011</p>
        </footer>
    </div>

    <div class="tanchuceng">
        <div class="msg">
            <div class="exit" onclick="exit()">x</div>
            <p id="message"></p>
        </div>
    </div>
</body>
</html>